<template>
	<Scroll cname="search-panel"
          @onScroll="onScroll"
          ref="scroll">
    <!-- 输入栏 -->
		<div class="header" ref="header" style="">
			<input v-model="inputValue" 
						type="text" 
						placeholder="请输入关键字搜索" 
						class="input-box"
						value="inputValue"
						maxlength="20" 
						focus>
			<span @click="onClose" class="tap-close">取消</span>
			<span @click="onCancel" class="icon-close tap-cancel"></span>
		</div>
		<!-- 搜索结果 -->
		<ul v-show="comics.length" class="search-content">
      <li v-for="(item, index) in comics" :key="index">
        <ComicL :comic="item" @onTapComic="onTapComic"/>
      </li>
    </ul>
		<div v-show="comics.length===0">
			<!-- 历史搜索 -->
			<div class="search-history">
				<h1>历史搜索</h1>
				<ul class="tags-box">
          <li v-for="(item, index) in oldSearchRecords" :key="index" @click="">
            <Tag cname="cate-tag"><span>{{item}}</span></Tag>
          </li>
        </ul>
			</div>
			<!-- 热门搜索 -->
			<div class="search-history">
				<h1>热门搜索</h1>
				<ul class="tags-box">
          <li v-for="(item, index) in hotSearchRecords" :key="index" @click="">
            <Tag cname="cate-tag"><span>{{item}}</span></Tag>
          </li>
        </ul>
			</div>
		</div>
    <!-- totop -->
    <ToTop v-if="showListToTop" @onToTop="onToTop"/>
	</Scroll>
</template>

<script>
import Header from './Header.vue'
import {Mixin} from '../../utils/mixin.js'
import {freazySearch} from '../../api/comic.js'
import Scroll from '../core/scroll.vue'
import ToTop from '../../components/common/ToTop.vue'
import ComicL from './ComicL.vue'
import Tag from './Tag.vue'

export default {
	mixins: [Mixin],
	components: {
		Scroll,
		Header,
		ComicL,
		ToTop,
		Tag
	},
	data() {
		return {
			inputValue: '',
			timeout: null,		//计时器
			comics: [],				//搜索结果
			totle: 0,					//搜索到的总条数
			start: 0,					//起始位
			limit: 10,				//默认 每次加载10条
			showListToTop: false
		}
	},
	methods: {
		// 提交搜索表单
		onRealSearch(keyword) {
			this.setOldSearchRecords(keyword)
			freazySearch({q:keyword})
			.then(res=>{
				console.log(res)
				this.totle = res.totle
				this.comics = res.comics
			}).catch(err=>{
				console.log(err)
			})
		},

		//
		onTapComic(cid) {
      console.log("点击了漫画 "+ cid)
      this.$router.replace({path: `/comic/${cid}`});
    },

    //滑动
    onScroll(offsetY) {
    	this.headerStyleChangeWithScroll(offsetY)
      //console.log(offsetY)
      if (offsetY > 200) {
        this.showListToTop = true
      }
      if (offsetY < 200) {
        this.showListToTop = false
      }
    },

    headerStyleChangeWithScroll(offsetY) {
      if(offsetY<=50) {
        this.$refs.header.style.backgroundColor='rgba(255,255,255,0.01)'
      }
      if(offsetY>50&&offsetY<=200) {
        this.temp = offsetY/200
        this.$refs.header.style.backgroundColor='rgba(255,255,255,'+this.temp+')'
      }
    },

    onToTop() {
      this.$refs.scroll.scrollTo(0,0)
    },

    // 点击取消
    onCancel() {
    	this.inputValue = ''
    	this.comics = []		
			this.totle = 0				
			this.start = 0				
			this.showListToTop = false
    },

    // 点击关闭页面
    onClose() {
    	this.onHiddenSearchPanel()
    }

	},
	watch: {
		inputValue(newVal, oldVal) {
			console.log(newVal)
			clearTimeout(this.timeout)
			newVal = newVal.replace(/\s/g,'')
			if (newVal === '') { return }
			this.timeout = setTimeout(()=> {
				newVal && this.onRealSearch(newVal)
			}, 1000)
		}
	}
}
</script>

<style lang="scss" scoped>
@import '../../assets/style/mixin.scss';
@import '../../assets/style/color.scss';

.search-panel {
	position: relative;
	z-index: 199;
	width: 100%;
  height: 100%;
  font-size: $font-size-16;
  clear: both;
  background-color: $color-bg-f;
  .header {
  	display: flex;
	  -webkit-box-align: center;
	  -ms-flex-align: center;
	  align-items: center;
	  position: fixed;
	  z-index: 49;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 50px;
	  box-sizing: border-box;
    color: $color-text-f;
    background-color: $color-bg;
    .input-box {
    	flex: 1;
	    -ms-flex: 1;
			-webkit-box-flex: 1;
    	height: 36px;
    	border: none;
    	padding-left: 6px;
    	margin-left: 10px;
    }
    .tap-close {
    	color: $color-text-fa;
			width: 50px;
			height: 50px;
			border-radius: 50%;
	  	font-size: $font-size-24;
			@include center;
			margin-left: 10px;
			margin-right: -14px;
    }
    .tap-cancel {
    	width: 18px;
    	height: 18px;
    	line-height: 18px;
    	display: inline;
    	position: relative;
    	right: 76px;
    	color: #000;
    	text-align: center;
    	border: 1px solid #000;
    	border-radius: 50%;
    }
  }
  .search-history {
    margin-top: 60px;
  	h1 {
  		margin-left: 10px;
  	}
  	.tags-box {
      width: 100%;
	    margin: auto;
	    display: flex;
	    justify-content: flex-start;
	    align-items: flex-start;
	    flex-wrap: wrap;
	    padding: 0 10px;
	    overflow: hidden;
	    color: $color-text-7;
	    li {
	      width: 22%;
	      height: 30px;
	      line-height: 30px;
	      margin-top: 8px;
	      margin-right: 3%;
	      text-align: center;
	      background-color: $color-bg;
	      box-sizing: border-box;
	      border-radius: 2px;
	      font-size: $font-size-14;
	      overflow: hidden;
	      .cate-tag {
	        box-sizing: border-box;
	        padding: 1px 6px 3px 6px;
	      }
	    }
	    li:nth-child(1) {
	    	background: rgba(0,94,213,.3);
	    }
	    li:nth-child(2) {
	    	background: rgba(0,94,213,.2);
	    }
	    li:nth-child(3) {
	    	background: rgba(0,94,213,.1);
	    }
    }
  }
  .search-history:last-child {
  	margin-top: 20px;
  }
  .search-content {
  	margin-top: 50px;
  	width: 100%;
    margin-top: 50px;
    box-sizing: border-box;
    padding: 0 10px 10px 10px;
    li {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background-color: white;
      padding: 0.25rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
}
</style>